  <template>
    <div id='staff-management'>
        <el-card class="box-card box-card-left" shadow="hover">
            <div class="bcl-top">
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="phone" class="inp" placeholder="请输入内容" maxlength="13" clearable></el-input>
                <el-button type="primary" class="btn" @click="search">搜索</el-button>
            </div>
            <loading v-if="isShowTable"></loading>
            <div v-else>
                <el-table
            
            :data="tableData"
            highlight-current-row
            :stripe="true"
            
            @row-click="goAuthDetail"
            style="width: 100%">
              <el-table-column
                prop="name"
                align="center"
                label="姓名">
              </el-table-column>

              <el-table-column
                prop="source"
                align="center"
                label="渠道">
              </el-table-column>

              <el-table-column
                prop="numberSum"
                align="center"
                label="申请次数/逾期次数">
              </el-table-column>

              <el-table-column
                prop="currentStatus"
                align="center"
                label="当前状态">
              </el-table-column>
            </el-table>
            <el-pagination
                class="paga"
                v-show="tableData.length"
              @current-change="handleCurrentChange"
              :page-size="10"
              :pager-count="5"
              :current-page="currentPage1"
              layout="total, prev, pager, next, jumper"
              :total="total"
              :background="true">
            </el-pagination>
            </div>
        </el-card>
        <div class="box-card-right">
            <el-card class="box-card right-top" shadow="hover">
                <div class="right-top-one">
                    身份详情
                </div>
                <loading  v-show="isShowDtail" class="loadingcopy"></loading>
                <ul class="right-top-nav" v-show="!isShowDtail">
                    <li class="list">
                        <span>
                            姓名: {{CustIdentityDetailVo.name || placeholder}}
                        </span> 
                    </li>
                    <li>
                        <span>身份证号:</span>
                        <span>{{CustIdentityDetailVo.idCard || placeholder}}</span>
                    </li>
                    <li class="list">申请手机号: {{CustIdentityDetailVo.phone || placeholder}}</li>
                    <li>身份证地址: {{CustIdentityDetailVo.address || placeholder}}</li>
                </ul>
            </el-card> 
            <el-card class="box-card right-top" shadow="hover">
                <div class="right-top-one mar-b20">
                    催收记录
                </div>
                <loading v-if="isRecallRecord"></loading>
                <el-table
                v-else
                :data="tableData1"
                class="table3"
                height="200"
                :stripe="true"
                border
                style="width: 100%">
                  <el-table-column
                    prop="time"
                    align="center"
                    label="跟进时间">
                  </el-table-column>

                  <el-table-column
                    prop="calledPerson"
                    align="center"
                    label="被呼叫人"
                  </el-table-column>

                  <el-table-column
                    prop="followWay"
                    align="center"
                    label="呼叫号码">
                  </el-table-column>

                  <el-table-column
                    prop="followPerson"
                    align="center"
                    label="跟进人">
                  </el-table-column>

                  <el-table-column
                    prop="info"
                    align="center"
                    label="跟进内容">
                  </el-table-column>
                </el-table>
            </el-card> 
             <el-card class="box-card right-top" shadow="hover">
                <div class="right-top-one mar-b20">
                    还款详情
                </div>
                <loading v-if="isRepaymentDetails"></loading>
                <el-table
                :data="tableData2"
                class="table3"
                height="200"
                :cell-class-name="tableRowClassName"
                :stripe="true"
                border
                style="width: 100%">
                  <el-table-column
                    prop="repayTime"
                    label="实际还款时间"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="lendCode"
                    label="订单号"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="operatorTime"
                    align="center"
                    label="借款日">
                  </el-table-column>

                  <el-table-column
                    prop="lendAmount"
                    align="center"
                    :formatter="ccn"
                    label="借款金额">
                  </el-table-column>

                  <el-table-column
                    prop="needRepayTime"
                    align="center"
                    label="应还时间">
                  </el-table-column>

                  <el-table-column
                    prop="needRepayAmount"
                    align="center"
                    :formatter="ccn"
                    label="应还金额">
                  </el-table-column>

                   <el-table-column
                    prop="noRepayAmount"
                    align="center"
                    :formatter="ccn"
                    label="未还金额">
                  </el-table-column>

                  <el-table-column
                    prop="days"
                    align="center"
                    label="逾期天数">
                  </el-table-column>

                  <el-table-column
                    prop="realRepayAmount"
                    align="center"
                    :formatter="ccn"
                    label="还款金额">
                  </el-table-column>
                </el-table>
            </el-card> 
        </div>
            
        </el-card>
       
        <!-- 审核通过 -->
         <!-- <confirm
            :show='show_confirm_pass'
            title='确认通过申请'
            :loading='loading_pass'
            @close='show_confirm_pass=false'
            @confirm='pass'>
                 </confirm> -->
          


    </div>
</template>
<style>
 
</style>
<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import imageView from '../components/ImageView.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import { authApplyDetailValidation } from '../validation/validation'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { repayApi, custApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            imageView,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else if(boolean === false){
                    return '否'
                }else{
                    return '--'
                }
            }
        },
        data() {
            return {
                options: [{
                  value: '1',
                  label: '姓名'
                }, {
                  value: '2',
                  label: '手机号'
                }],
                value:"2",
                phone:"",
                tableData: [],
                tableData1:[],
                tableData2:[],
                total:10,
                pageIndex:1,
                pageSize:10,
                placeholder:"--",
                CustIdentityDetailVo:{},
                isShowTable:false,
                currentPage1:1,
                isShowDtail:false,
                isRecallRecord:false,
                isRepaymentDetails:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            amountToFen(){
                return (this.amount * 100).toFixed(0)
            },
            typeValue(){
                if(this.value==1){
                    return "姓名"
                }else if(this.value==2){
                    return "手机号"
                }
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            goAuthDetail(row, event, column){
                console.log(row.currentStatus)
                
                this.CustIdentityDetailVo={}
                let msg={
                    id:row.id
                }
                //身份详情
                this.custCustIdentityDetailFn(msg)
                //催收记录
                this.repayGetFollowRecordList(msg)
                //还款详情
                this.custGetRepayAmountRecordListFn(msg)
            },
            custGetRepayAmountRecordListFn(msg){
                this.isRepaymentDetails=true
                custApi.custGetRepayAmountRecordList(msg)
                .then(result=>{
                    this.isRepaymentDetails=false
                    console.log(result)
                    this.tableData2=result.page.list
                })
                .catch(error => {
                    this.isRepaymentDetails=false
                     this.isShowDtail=false
                    console.error(error)
                })
            },
            repayGetFollowRecordList(msg){
                this.isRecallRecord=true;
                repayApi.getFollowRecordList(msg)
                .then(result=>{
                    this.isRecallRecord=false;
                    console.log(result)
                    this.tableData1=result.page.list
                })
                .catch(error => {
                      this.isRecallRecord=false;
                    console.error(error)
                })
            },
            custCustIdentityDetailFn(msg){
                this.isShowDtail=true
                custApi.custCustIdentityDetail(msg)
                .then(result=>{
                    this.isShowDtail=false
                    console.log(result)
                    this.CustIdentityDetailVo=result
                })
                .catch(error => {
                     this.isShowDtail=false
                    console.error(error)
                })
            },
             ccn(row, column, cellValue){
                console.log(cellValue)
                if(!cellValue){
                    return '--'
                }else if(cellValue!=0&&cellValue){
                    return (cellValue/100)
                }else{
                    return cellValue
                }
            },
            /**
             * [search description]
             * @Author   lzh
             * @DateTime 2018-08-22T15:35:12+0800
             * @params  phone 搜索内容
             *          value 手机号 or 姓名
             * 
             */
            search(){
                this.pageIndex=1
                this.initList()
            },
            /**
             * [tableRowClassName description]
             * @Author   lzh
             * @DateTime 2018-08-23T10:13:02+0800
             * @description   订单结清， 标记红
             */
            tableRowClassName({row, rowIndex}){
                if(row.currentStatus=="已结清"){
                    return 'success-row';
                }
                    return '';
            },
            handleCurrentChange(val){
                this.pageIndex = val;
                this.initList()
            },
            initList(){
                if(this.value==1){
                    var msg={
                        pageIndex:this.pageIndex,
                        name:this.phone,
                        pageSize:this.pageSize
                    }
                }else if(this.value==2){
                    var msg={
                        pageIndex:this.pageIndex,
                        phone:this.phone,
                        pageSize:this.pageSize
                    }
                }
                this.isShowTable=true
                custApi.custCustManageList(msg)
                .then(result=>{
                   console.log(result)
                   this.tableData=result.page.list
                   if(!result.CustIdentityDetailVo){
                        this.CustIdentityDetailVo={}
                   }else{
                        this.CustIdentityDetailVo=result.CustIdentityDetailVo
                   }
                   this.isShowTable=false
                   this.total=result.page.totalRow
                   this.currentPage1=result.page.pageNumber
                   if(this.tableData!=""){
                        let mss={
                        id:this.tableData[0].id
                        }
                        
                       //身份详情
                        this.custCustIdentityDetailFn(mss)
                        //催收记录
                        this.repayGetFollowRecordList(mss)
                        //还款详情
                        this.custGetRepayAmountRecordListFn(mss)
                   }else{
                        this.CustIdentityDetailVo={}
                        this.tableData1=[]
                        this.tableData2=[];
                   }
                   
                })
                .catch(error => {
                    this.isShowTable=false
                    console.error(error)
                })
            },
            
        },
        created(){
            this.initList();
        }
    }
</script>
<style>
    #staff-management .box-card{
        margin: 0!important;
        margin: 20px!important;

    }
    #staff-management .el-input__inner{
        height: 44px;
        line-height: 44px;
        font-size: 16px;
    }
    #staff-management .box-card-right .box-card{
        margin-left: 0!important;

    }
    #staff-management .el-table .success-row .cell{
        /* color:rgb(255,0,0,.2)!important; */
        /* font-size: 20px!important; */
        color: red!important;
  }
  #staff-management .loadingcopy{
        margin-top: 4%;
  }
</style>
<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .alink:hover{
      color:#3399ff;
    }
    .search{
      padding:30px 0px 0px 30px;
      position: absolute;
      top:130px;
      left:10px;
      z-index:1000;
      width:676px;
      height:186px;
      background:#fff;
      border:1px solid #e4e7ed;
      box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
      -webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
      -ms-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
      -moz-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
      -o-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
    }
    .btn{
        width:96px;
        height:44px;
        margin-left:10px;
        padding:0;
        line-height:44px;
        font-size: 16px;
        span{
            position:relative;
            top:-10px;
        }
    }
    .inp{
        width:150px;
        height:44px;
        margin-left:10px;
    }
    
    .el-select-dropdown__item{
        height:44px!important;
        font-size: 16px!important;
    }
    #staff-management{
        font-size:16px;
        width::100%;
        min-width: 1100px;
        height:100%;
        padding:0;
        font-weight: normal;
    }


    .box-card-left,.box-card-right{
        float:left;
        color:#333;
        min-height:827px;
        width:36%;
    }
    .box-card-right{
         width:60%;
    }
    .paga{
         margin-top:20px;
         margin-right:10px;
    }
    .right-top{
        min-height:180px;
    }
    .right-top-one{
        height:40px;
        line-height: 40px;
        border-bottom: 1px solid #e4e7ed;
    }
    .right-top-nav{
        margin-top:20px;
        li{
            float: left;
            width:50%;
            min-height:40px;
            line-height: 40px;
            span{
                float: left;
                min-height:40px;
                line-height: 40px;
            }
        }
        .list{
            float: left;
            width:38%;
        }
    }
    .mar-b20{
        margin-bottom:20px;
    }
    .table3{
        margin-bottom:20px;
        overflow-y:scroll; 
    }
</style>